import { Descriptions } from "antd";
import styles from './index.module.sass';


interface Props {
    /**描述列表的标题，显示在最顶部 */
    title?: string

    /**内容列表 */
    list: any[]

    /**一行的 DescriptionItems 数量 */
    column?: number

    /**描述布局 */
    layout?: 'horizontal' | 'vertical'

    /**设置列表的大小。可以设置为 middle 、small, 或不填（只有设置 bordered={true} 生效） */
    size?: 'default' | 'middle' | 'small'

    /**自定义大小尺寸 */
    customSize?: 'mini'

    /**是否展示边框 */
    bordered?: boolean

    /**项类名称 */
    itemClassName?: string
}

const DescriptionTable: React.FC<Props> = ({
    title,
    list,
    column,
    layout = 'horizontal',
    size = 'default',
    customSize,
    bordered = true,
    itemClassName
}) => {
    console.debug('DescriptionTable', list)

    return (
        <Descriptions className={customSize === 'mini' ? styles.wrapper : ''} title={title} column={column} layout={layout} bordered={bordered} size={size}>
            {list.map(([label, content, opt]: any) =>
                <Descriptions.Item className={itemClassName} key={label} label={label} {...opt}>{content || '-'}</Descriptions.Item>
            )}
        </Descriptions>
    );
}

export default DescriptionTable;